<script setup>
import { onMounted, reactive, ref, watch, watchEffect } from "vue";
import Card from "../components/Card.vue";
import SelectBlock from "../components/SelectBlock.vue";
import useSearchProjecValue from "../hooks/useSearchProjecValue";
import ProjectCard from "../components/ProjectCard.vue";
import { useProjectList } from "api/project.js";
const {
  orderValue,
  visibleValue,
  statusValue,
  typeValue,
  OrderOptions,
  VisibleOptions,
  statusOption,
  typeOption,
} = useSearchProjecValue();

//控制触底刷新与下拉刷新
const refreshing = ref(false);
const finished = ref(false);
const loading = ref(false);
const currentPage = ref(1);
const onRefresh = async () => {
  currentPage.value = 1;
  const res = await getData();
  refreshing.value = false;
  data.value = res.data;
};
const onLoad = () => {
  getData().then(res => {
    currentPage.value++;
    if (res.data.length == 0) {
      finished.value = true;
    } else {
      loading.value = false;
      data.value.push(...res.data);
    }
  });
};

onMounted(() => {});
//获取数据
const data = ref([]);
const getData = () => {
  return useProjectList({
    search: keyWords.value,
    order: orderValue.value,
    visible: visibleValue.value,
    status: statusValue.join(","),
    type: typeValue.join(","),
    page: currentPage.value,
  });
};
//搜索栏
const showSearch = ref(false);
const keyWords = ref("");
</script>

<template>
  <div class="search-container">

    <van-sticky :offset-top="60">
      <div style="background:var(--main-gradient);border-radius: 10px ; overflow:hidden;margin-top: 20px;">
    <van-search
      background="var(--main-gradient)"
      shape="round"
      v-model="keyWords"
      placeholder="请输入搜索关键词"
      input-align="center"
    />
      <van-dropdown-menu active-color="var(--light-color)">
        <van-dropdown-item
          title="排序方式"
          v-model="orderValue"
          :options="OrderOptions"
        />
        <van-dropdown-item v-model="visibleValue" :options="VisibleOptions" />
        <van-dropdown-item title="项目状态">
          <SelectBlock
            :list="statusOption"
            v-model:value="statusValue"
          ></SelectBlock>
        </van-dropdown-item>
        <van-dropdown-item title="项目类型">
          <SelectBlock
            :list="typeOption"
            v-model:value="typeValue"
          ></SelectBlock>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-button @click="onRefresh" color="var(--main-gradient)"
        >确定</van-button
      >
      </div>
    </van-sticky>
    <div class="container">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          name="list"
          tag="van-list"
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <transition-group name="list">
            <ProjectCard
              v-for="(item, index) in data"
              :data="item"
              :key="item.pid"
            ></ProjectCard>
          </transition-group>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style scoped>
.search-container {
  background-color: var(--main-background-color);
  min-height: 100%;
}
.container {
  margin: 0 auto;
  padding: var(--page-padding);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.search {
  padding: 20px;
  background-color: rgb(121, 121, 121);
  box-shadow: var(--main-shadow);
}
.filter {
  width: 100%;
}
.van-button {
  width: 100%;
}
.van-pull-refresh {
  overflow: visible;
}
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>
